layui.use(['form','layer','table','laydate','laytpl'],function(){
    var form = layui.form,
        layer = parent.layer === undefined ? layui.layer : top.layer,
        $ = layui.jquery,
        laytpl = layui.laytpl,
        table = layui.table;
    var laydate = layui.laydate;

    //加载业务线列表
    $.get('/log/analysejob/business/list',function (data) {
        $.each(data.data,function (i, ele) {
            $("#analyse-business-list").append('<option value="'+ ele.number +'">'+ ele.name +'</option>')
            if(i == 0) {
                init(ele.number,"2019-05-12");
            }
        });
        form.render('select');
    });

    //初始化选择时间
    var date = new Date();
    var mothStr = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1):(date.getMonth() + 1);
    var dayStr = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
    var dateStr = date.getFullYear() + "-" + mothStr + "-" + dayStr;
    laydate.render({
        elem: '#datetime',
        value: dateStr,
        isInitValue: true
    });

    //搜索
    $(".search_btn").on("click",function(){
        var searchKey = $("#analyse-business-list").val();
        var datetime = $("#datetime").val();
        if(searchKey != null && searchKey != ''){
            init(searchKey,datetime);
        } else {
            layer.msg("请选择日志分析项目");
        }
    });

    /**
     * 初始化统计图
     * @param number
     */
    function init(number,datetime) {
        $.get("/log/analysejob/query?business=" + number + "&datetime=" + datetime, function (data) {
            console.log(data);
            var length = data.count;
            if (length == 0) {
                return null;
            }
            var seriesArrs = [];//pv uv统计数据等
            var topTitleMessageArr = []; //顶部标题数组
            $("#echart-box").html("");
            $.each(data.data, function (i, ele) {
                seriesArrs.unshift(ele);
                topTitleMessageArr.unshift(ele.remarks);
            });
            //渲染统计图
            setTrendData(seriesArrs, topTitleMessageArr);
        });
    }

    /**
     * 渲染统计图效果，设置检测项目相应的数据统计
     * @param seriesArr 展示数据
     * @param topTitleMessageArr 检测信息
     */
    function setTrendData(seriesArrs, topTitleMessageArr) {
        var lineChart = echarts.init(document.getElementById('linechart'));
        lineChart.showLoading();

        //legend数据
        function setlegendData(topTitleMessageArr) {
            var legendDataArr = [];
            $.each(topTitleMessageArr,function (i, ele) {
                legendDataArr.unshift(ele);
            });
            return legendDataArr;
        }

        //series数据
        function setseriesData(seriesArrs) {
            var series = [];
            $.each(seriesArrs,function (i, ele) {
                var obj = {
                    name:ele.remarks,
                    value:ele.count
                };
                series.push(obj);
            });
            return series;
        }


        var option = {
            title: {
                text: '页面转化率',
                subtext: ''
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c}%"
            },
            toolbox: {
                feature: {
                    dataView: {readOnly: false},
                    restore: {},
                    saveAsImage: {}
                }
            },
            legend: {
                data: setlegendData(topTitleMessageArr)
            },
            series: [
                {
                    name: '实际',
                    type: 'funnel',
                    left: '10%',
                    width: '80%',
                    maxSize: '80%',
                    label: {
                        normal: {
                            position: 'inside',
                            formatter: '{c}%',
                            textStyle: {
                                color: '#fff'
                            }
                        },
                        emphasis: {
                            position:'inside',
                            formatter: '{b}实际: {c}%'
                        }
                    },
                    itemStyle: {
                        normal: {
                            opacity: 1,
                            borderColor: '#fff',
                            borderWidth: 2
                        }
                    },
                    data: setseriesData(seriesArrs)
                }
            ]
        };

        $("#loading").hide();
        lineChart.setOption(option);
        lineChart.hideLoading();

    }




});